<script setup>
import {onMounted,ref} from "vue";
import axios from '../api'
import _ from 'lodash'
// var _ = require('lodash');
//准备查询数据,将数据绑定在表格上,指定表格要显示的数据
const tableData=ref([]);
/*分页数据*/
/*当前页码*/
const current=ref(1);
/*每页条数*/
const size=ref(10);
/*总共条数*/
const total=ref(0);
/*是否显示对话框*/
/*删除防误操作提示框*/
const dialogVisible=ref(false);
/*编辑对话框*/
const editVisible=ref(false);
/*要处理的数据的下标*/
const targetIndex=ref(-1);
/*要处理的数据*/
const targetObj=ref({});
/*删除提示消息*/
const dialogmsg=ref("");

onMounted( function(){
  //查询数据
  showTableData();
})
/*显示表格数据*/
async function showTableData(){
  const result=await axios.permissionPage(current.value,size.value)
  tableData.value=result.records;
  total.value=result.total;
}
/*点击分页页码按钮*/

function changePage(pageNum){
  current.value=pageNum;
  showTableData();
}
/*编辑按钮*/
function handleEdit(index,row){
  //记录要修改的数据
  targetObj.value=_.cloneDeep(row);
  targetIndex.value=index;
  //弹出对话框
  editVisible.value=true;
}
/*点击删除按钮的函数*/
async function handleDelete(index,row){
  dialogmsg.value="确认要删除["+row.name+"]这个行数据吗?";
  dialogVisible.value=true;
  targetObj.value=row;
  targetIndex.value=index;

}
async  function deleteConfirm(){
  //获取要删除的数据id
  //发送请求
  await axios.productDelete(targetObj.value.id);
  //提示信息
  //改变数据
  //1   删除表格中的数据
  tableData.value.splice(targetIndex.value,1)
  //2.重新加载数据
  // showTableData();
  dialogVisible.value=false;
}
/*提交编辑数据*/
async function editObj(){
  //删除掉用不需要的数据
  delete targetObj.value.isactive;
  delete targetObj.value.updatedat;
  delete targetObj.value.createdat;
  //发送请求
  const result=await axios.productEdit(targetObj.value);
  //该是修改之后的数据
  tableData.value[targetIndex.value]=result;
  //取消对话框
  editVisible.value=false;
}
</script>

<template>
  <el-table :data="tableData" border style="width: 100%">
    <el-table-column prop="permname" label="名称" width="180" />
    <el-table-column prop="permkey" label="关键字" width="180" />
    <el-table-column prop="permtype" label="分类" />
    <el-table-column prop="servicemodule" label="所属模块" />
    <el-table-column prop="description" label="简介" />
    <el-table-column>
      <template #default="scope">
        <el-button size="small" @click="handleEdit(scope.$index, scope.row)">
          编辑
        </el-button>
        <el-button
            size="small"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
        >
          删除
        </el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination background layout="total,prev, pager, next" :total="total"
                 @current-change="changePage"/>
  <!--删除提示框-->
  <el-dialog
      v-model="dialogVisible"
      title="确认消息"
      width="500"
      :before-close="void(0)"
  >
    <span>{{dialogmsg}}</span>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="deleteConfirm">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>

  <!--  编辑商品数据的对话框-->
  <el-dialog v-model="editVisible" title="编辑" width="500">
    <el-form :model="targetObj">
      <el-form-item label="名称" label-width="140px">
        <el-input v-model="targetObj.name" autocomplete="off" />
      </el-form-item>
      <el-form-item label="分类" label-width="140px">
        <el-input v-model="targetObj.category" autocomplete="off" />
      </el-form-item>
      <el-form-item label="品牌" label-width="140px">
        <el-input v-model="targetObj.brand" autocomplete="off" />
      </el-form-item>
      <el-form-item label="价格" label-width="140px">
        <el-input v-model="targetObj.price" autocomplete="off" />
      </el-form-item>
      <el-form-item label="标题" label-width="140px">
        <el-input v-model="targetObj.title" autocomplete="off" />
      </el-form-item>
      <el-form-item label="简介" label-width="140px">
        <el-input v-model="targetObj.description" autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="editVisible = false">取消</el-button>
        <el-button type="primary" @click="editObj">
          提交
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style scoped>

</style>